<template>
	<view class="content" :style="'height:'+screenHeight+'px'">
		<view class="searchBox">
			<!-- 搜索地址 -->
			<!-- <uni-search-bar @confirm="search" bgColor="#fff" :focus="true" v-model="searchValue" @input="input">
			</uni-search-bar> -->
		</view>
		<!-- <view class="sort"> -->
		<!-- 分类 -->
		<!-- <view class="sortItem" v-for="o in sortList">{{o.typeName}}</view> -->
		<!-- </view> -->
		<view class="swip">
			<!-- 轮播 -->
			<swiper class="swipInner" autoplay indicator-dots circular>
				<swiper-item v-for="o in recommendList" @click.native="jumpDetail(o.id)">
					<image class="swiImg" :src="o.imgSrc" alt="" mode="aspectFill">
				</swiper-item>
			</swiper>
		</view>
		<view class="box1">
			<!-- 抢购、绿卡 -->
			<view class="leftBox" @click.native="jumpKill">
				<view>限时抢购</view>
				<image class="qgImg" :src="qgImg"></image>
			</view>
			<view class="rightBox" @click.native="jumpGreenCard">
				<view>绿卡优惠</view>
				<image class="lkImg" :src="lkImg"></image>
			</view>
		</view>
		<view class="items">
			<!-- 商详 -->
			<view class="itemsInner" v-for="item in itemsList" @click.native="jumpDetail(item.id)">
				<image class="imgItem" :src="item.imgSrc" mode="aspectFill"></image>
				<view class="textInfo1">{{item.title}}</view>
				<view class="textInfo2">{{item.weight}}{{item.eng}}({{item.chn}}) &nbsp;￥{{item.price}}</view>
				<view class="textInfo2">{{item.describe}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.selAllGoods();
			this.selAllSort();
			this.selRecommendGoodImg();
		},
		data() {
			return {
				title: 'Hello',
				screenHeight: getApp().globalData.screenHeight,
				searchValue: "",
				itemsList: [],
				sortList: [],
				recommendList: [],
				qgImg: "http://1.94.171.115:9000/image/q.gif",
				lkImg: "http://1.94.171.115:9000/image/lk.gif"
			}
		},
		methods: {
			jumpGreenCard() {
				uni.reLaunch({
					url: "/pages/sort/sort?num=222"
				})
			},
			jumpKill() {
				uni.navigateTo({
					url: "/pages/seckillGood/seckillGood"
				})
				// uni.reLaunch({
				// url: "/pages/sort/sort?num=111"
				// url: "/pages/seckillGood/seckillGood"
				// })
			},
			selRecommendGoodImg() {
				uni.request({
					url: "api/appindex/selRecommendGood",
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.statusCode == 200) {
							this.recommendList = res.data.data;
						}
					}
				})
			},
			selAllSort() {
				uni.request({
					url: "api/appindex/selAllSort",
					method: 'GET',
					success: (res) => {
						// console.log(res);
						if (res.statusCode == 200) {
							this.sortList = res.data.data;
						}
					}
				})
			},
			selAllGoods() {
				uni.request({
					url: "api/appindex/selAllGoods",
					method: 'GET',
					success: (res) => {
						// console.log(res);
						if (res.statusCode == 200) {
							this.itemsList = res.data.data;
						}
					}
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：内容：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: '/pages/itemDetail/itemDetail?id=' + id,
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f6;
	}

	// .content {
	// 	background-color: #ebedf4;
	// }

	.searchBox {
		margin-top: 0px;
		height: 100%;
	}

	.sort {
		width: 750rpx;
		height: 210px;
		// background-color: #ebedf4;
		margin: 20rpx auto;

		.sortItem {
			width: 180rpx;
			height: 180rpx;
			background-color: #ffffff;
			border-radius: 100rpx;
			float: left;
			text-align: center;
			line-height: 167rpx;
			margin-left: 5rpx;
			margin-top: 5rpx;
			font-size: 30rpx;
		}
	}

	.swip {
		width: 750rpx;
		height: 200px;
		border: 0px solid red;
		margin-bottom: 20px;
		// margin-top: 10rpx;

		.swipInner {
			width: 100%;
			height: 100%;

			.swiImg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.box1 {
		width: 750rpx;
		height: 190rpx;
		// background-color: #8f949a;
		margin: 0 auto;
		margin-bottom: 20px;

		.leftBox {
			// border: 1px solid red;
			width: 360rpx;
			height: 150rpx;
			border-radius: 40rpx;
			float: left;
			background-color: #fff;
			text-align: center;

			.qgImg {
				width: 70%;
				height: 80%;
			}
		}

		.rightBox {
			// border: 1px solid red;
			width: 360rpx;
			height: 150rpx;
			border-radius: 40rpx;
			float: right;
			background-color: #fff;
			text-align: center;

			.lkImg {
				width: 70%;
				height: 80%;
			}
		}
	}

	.items {
		width: 750rpx;
		// border: 1px solid red;
		margin: 0 auto;
		margin-bottom: 30px;

		.itemsInner {
			width: 322rpx;
			height: 420rpx;
			// border: 1px solid red;
			margin-left: 40rpx;
			margin-bottom: 20px;
			background-color: #FFF;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			float: left;

			.imgItem {
				width: 80%;
				height: 60%;
				margin-left: 30rpx;
			}

			.textInfo1 {
				margin-left: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.textInfo2 {}
		}
	}
</style>